<template>
	<div id="classSpace" class="i_maxW" :class="{pbottom: isAtive}">
		<div class="classSpace_link box">
			<div class="classSpace_h">
				<div class="classSpace_h1">
					<i class="ipm banjiquan_touxiang"></i>
					<div class="classSpace_hc">

						<template  v-if='roleBaseid(5)'>
							<div class="parent-select" v-if="switch_.length > 0">
								<template >
									<el-select class="select-p1" filterable v-model="switch_value" @change="changUser($event)" placeholder="切换">
											<el-option
												v-for="item in switch_"
												:key="item.id"
												:label="item.name"
												:value="item.id">
											</el-option>
									</el-select>
								</template>
								<el-select class="select-p2" filterable v-model="classValue" 
										@change="getUserClass($event)"
										placeholder="请选择" disabled>
										<el-option
										v-for="item in userClass"
										:key="item.id"
										:label="item.rename"
										:value="item.id">
									</el-option>
								</el-select>
							</div>

							<div  v-else>

								<el-select class="select-p2" filterable v-model="classValue" 
										@change="getUserClass($event)"
										placeholder="请选择">
										<el-option
										v-for="item in userClass"
										:key="item.id"
										:label="item.rename"
										:value="item.id">
									</el-option>
								</el-select>
							</div>
						</template>
						<template v-else>
							<el-select filterable v-model="classValue" 
									@change="getUserClass($event)"
									placeholder="请选择">
									<el-option
									v-for="item in userClass"
									:key="item.id"
									:label="item.rename"
									:value="item.id">
								</el-option>
							</el-select>
						</template>

					</div>
				</div>

				<div class="classSpace_h2 clear"  >
					<el-tooltip class="item" effect="dark" :content="`班主任：${headmaster}`" placement="top-start">
						<span>班主任：{{headmaster}}</span>
					</el-tooltip>
					<el-tooltip class="item" effect="dark" :content="`班级人数：${sunNumber}`" placement="top-start">
						<span>班级人数：{{sunNumber}}</span>
					</el-tooltip>
				</div>

			</div>
			<!--  -->
			<div class="menuLk">
				<el-menu
				:default-active="activeIndex">
					<template v-for="(item, index) in menuNavRouteData.children">
						<el-menu-item :index="index+''" v-if="roleBaseid(4,5) && item.path == 'achieve'" :key="item.id">
							<i :class="`ipm ${item.icon}`"></i>
							<template>
								<router-link 
								:to="'/'+menuNavRouteData.path+'/'+item.path+'/'+item.children[3].path + '?id=' + classValue"
								:class="{'Indexactive':$route.path.split('/')[2] === item.path, 'activePath': isActivePath}">{{item.txtName}}</router-link>
							</template>
							<i class="ipm Shape_04"></i>
						</el-menu-item>
						<el-menu-item :index="index+''" :key="item.id" v-else>
							<i :class="`ipm ${item.icon}`"></i>
							<template>
								<router-link 
								:to="'/'+menuNavRouteData.path+'/'+item.path+'/'+item.children[0].path + '?id=' + classValue"
								:class="{'Indexactive':$route.path.split('/')[2] === item.path, 'activePath': isActivePath}">{{item.txtName}}</router-link>
							</template>
							<i class="ipm Shape_04"></i>
						</el-menu-item>
						</template>
				</el-menu>
			</div>
		</div>
		
		<div class="classSpace_cont box">
				<router-view class="fade-router"></router-view>
		</div>
		
	</div>
</template>

<script>

	export default {
		data(){
			return{
				userClass: [],/*班级列表*/
				classValue:  '',/*班级id*/
				sunNumber: 0,/*班级人数*/
				menuNavRouteData: deep_clone(  this.$store.getters.leftMenuNav ),
				activeIndex: sessionStorage.getItem('itc-go-classdetail-linkIndex') || '1',
				jumpurl: '',
				isActivePath: false,
				isAtive: false,
				headmaster: '',/*班主任*/
				childrenList: JSON.parse(sessionStorage.getItem('parentLsit')),
				switch_value: this.$g.user_id,
				switch_: []
			}
		},
		watch: {
			$route:{
				handler( n  ,  o ){
					if (n.query.id === 'null'|| n.query.id === "") {
						this.$message.error('该学员未绑定班级，请先绑定班级,详情请联系管理员');
					}
					this.jumpurl = n.fullPath;
					this.testCss()
				},
				deep: true
			},
			'classValue'(newval,val){
				sessionStorage.setItem('classId', newval) 
				this.$store.commit('SET_NCHANGEDATA', new Date())
			},
			'changData'(val, newval){
				this.path = sessionStorage.getItem('classId')
				this.getClassS()
				this.getHeadmaster()
			}

		},
		destroyed(){
			sessionStorage.removeItem('classCode')
		},
		computed: {
			changData() {
				return deep_clone(this.$store.state.changData);
			},
		},
		created(){
			this.getUserClass();
			this.setDefaultChild();
			this.getSwitch()
			this.rolePath()
		},
		methods: {
			/**
			 * 切换小孩
			 * @DateTime 2020-03-06T14:17:44+0800
			 * @param    {[type]}                 parent_child_id [description]
			 * @return   {[type]}                                 [description]
			 */
			changUser(parent_child_id){
				//设置当前父母操作的学生id
				var inx = getOneColumn( this.switch_ , 'userid').indexOf(parent_child_id);
				var parent_child_class_id = inx > -1 ?  this.switch_[inx].org_id : '';
				sessionStorage.setItem('parent_child_id' , parent_child_id);
				sessionStorage.setItem('parent_class_id', parent_child_class_id)
				sessionStorage.setItem('parent_child_class_id', parent_child_class_id)
				sessionStorage.setItem('classId', parent_child_class_id)
				this.classValue = parent_child_class_id +''
				this.$store.commit('SET_NCHANGEDATA', new Date())

				if(parseInt(this.$route.query.id) !== parseInt(this.classValue) ){
					this.$router.push({ path : this.$route.path, query : { id : this.classValue } });
				}
			},
			//小孩数据列表
			getSwitch(){
				let success = (res =>{
					let data = res.data;
					if (data.length === 0  || data.indexOf( null)>-1) {return}
					this.switch_ = data;
					this.switch_value = sessionStorage.getItem('parent_child_id') 
					?  parseInt(sessionStorage.getItem('parent_child_id') ) 
					: this.switch_[0].id;
				});
				this.$ajax({
					url: 'api/user/relation',
					method: 'get',
					params: {
						user_id: this.switch_value,
						type: 3,
						data_type: 0
					},
					func: {success: success}
				})
			},
			
			//修改试卷css样式
			testCss(){
				let path = this.$route.path
				let urlArr = ['/class/task/lookpaper', '/class/task/reviewpaper', '/class/homework/homeworkTask2', '/class/homework/homeworkTask']
				this.isAtive = urlArr.includes(path) ? true : false
			},
			/**
			 * 根据角色修改导航命名
			 * @DateTime 2020-03-06T13:53:16+0800
			 * @return   {[type]}                 [description]
			 */
			rolePath(){

				this.menuNavRouteData.children.forEach( item =>{
					if (this.roleBaseid(5)) {

						item.txtName = item.txtName === '成绩' ? '孩子成绩' : item.txtName 
						item.txtName = item.txtName === '作业' ? '孩子作业' : item.txtName 
					}else if (this.roleBaseid(6)){

						item.txtName = item.txtName === '成绩' ? '学生成绩' : item.txtName 
						item.txtName = item.txtName === '作业' ? '学生作业' : item.txtName 
						item.txtName = item.txtName === '档案' ? '学生档案' : item.txtName 
					}else if (this.roleBaseid(4)){

						item.txtName = item.txtName === '成绩' ? '我的成绩' : item.txtName 
						item.txtName = item.txtName === '作业' ? '我的作业' : item.txtName 
						item.txtName = item.txtName === '档案' ? '我的档案' : item.txtName 
					}
					
				})
			},
			goClassDetail(url, index, flag) {
					this.$router.push({path: url, query:{id:this.classValue}})		
					sessionStorage.setItem('itc-go-classdetail-linkIndex', parseInt(index) + 1)
					sessionStorage.setItem('itc-go-classdetail-link', url)
			},
			//获取班级列表数据
			getUserClass(val){
			
				let success = (res =>{
					let data = res.data;
					if(data.length === 0){

						this.$message.error('您尚未绑定班级或班级已被管理员禁用,班级空间关联班级才能进行操作,请联系管理员进行操作。')
						this.$router.push('/personal/index')
						return
					}
					
					this.userClass = data;
					if (val == undefined) {
						sessionStorage.setItem('classCode', data[0].password)
						this.$store.commit('SET_GRADEID',data[0].grade_id)
					}else{
						this.userClass.forEach(ele => {
							if (ele.id == val) {
								sessionStorage.setItem('classCode', ele.password)
								this.$store.commit('SET_GRADEID',ele.grade_id)
							}
						})
					}

					if( !this.$route.query.id && !sessionStorage.getItem('parent_child_class_id') ){
						this.classValue = this.userClass[0].id;
					}

					if( parseInt(this.$route.query.id) !== parseInt(this.classValue) ){
						this.classValue = sessionStorage.getItem('classId')+'';
						let query = deep_clone(this.$route.query);
						Object.assign(query, {id: this.classValue})
						this.$router.push({ path : this.$route.path, query : query });
					}

					if (this.classValue === 'null' || this.classValue === '') {
						this.$message.error('该学员未绑定班级，请先绑定班级,详情请联系管理员');
					}

				});
				this.$ajax({
					url: 'api/org/class_userid',
					method: 'get',
					params: {
						user_id: this.$g.user_id,
						style: 1,
						data_type: 0
					},
					func: {success: success}
				})
			},
			//获取班主任
			getHeadmaster(){

				let success = (res=>{
					let data = res.data;
					if (data.length === 0 ) {
						this.headmaster = '--'
					}else{
						this.headmaster = data[0].name;
						sessionStorage.setItem('headmasterid', data[0].id)
					}
				});

				let fail = (res =>{return})

				this.$ajax({
					url: 'api/org/class_something',
					method: 'get',
					params: {
						style: 11,
						classid: this.path,
						role_id: 6,
						data_type: 2
					},
					func: {
						success: success, fail: fail
					}
				})
			},
			//学生
			getClassS(){

				let success = (res =>{
					let data = res.data.data;
					this.sunNumber  = data.length;		
				});

				let fail = (res =>{return})

				this.$ajax({
					url: 'api/org/class_something',
					method: 'get',
					params: {
						classid: this.classValue,
						style: 10,
						size: 0,
						role_id: 4,
						data_type:2
					},
					func: {success: success,fail: fail}
				})
			},
			//设置默认小孩孩子账号
			setDefaultChild(){

				if( sessionStorage.getItem('parent_child_id') ){
					return false;
				}
				let success = (res =>{
					let data = res.data;
					if (data.length === 0  || data.indexOf( null)>-1) {return}
					sessionStorage.setItem('parent_child_id', data[0].id)
					sessionStorage.setItem('parent_class_id', data[0].org_id)
					sessionStorage.setItem('parentLsit', JSON.stringify( deep_clone( data ) ))
					 this.$router.push({ path : this.$route.path, query : { id : data[0].org_id } });
				});
				this.$ajax({
					url: 'api/user/relation',
					method: 'get',
					params: {
						user_id: this.$g.user_id,
						type: 3,
						data_type: 0
					},
					func: {success: success}
				})
			}
		}

	}
</script>
